<template>
  <view :class="locale">
    <popup :show="showPopup" @update:show="$emit('closePopup',false)">
      <view class="padding-tb-20 flex-row" @click="$emit('chooseImage', 0); $emit('closePopup')">
        <view style="margin:auto 32rpx;">
          <image class="select-icon" src="/static/icon/select-upload/camera.svg"/>
        </view>
        <view class="column gap-8" style="align-items: flex-start">
          <view class="option-title">{{ lang.paizhao.title }}</view>
          <view class="option-description">{{ lang.paizhao.desc }}</view>
        </view>
      </view>

      <view class="padding-tb-20 flex-row" @click="$emit('chooseImage', 1); $emit('closePopup')">
        <view style="margin:auto 32rpx;">
          <image class="select-icon" src="/static/icon/select-upload/photo.svg"></image>
        </view>
        <view class="flex-column gap-8" style="align-items: flex-start">
          <view class="option-title">{{ lang.xiangce.title }}</view>
          <view class="option-description">{{ lang.xiangce.desc }}</view>
        </view>
      </view>

      <view class="padding-tb-20 flex-row" @click="$emit('chooseMessage'); $emit('closePopup')">
        <view style="margin:auto 32rpx;">
          <image class="select-icon" src="/static/icon/select-upload/WeChat.svg"></image>
        </view>
        <view class="flex-column gap-8" style="align-items: flex-start">
          <view class="option-title">{{ lang.weixin.title }}</view>
          <view class="option-description">{{ lang.weixin.desc }}</view>
        </view>
      </view>
    </popup>
  </view>
</template>

<script>
import Popup from "@/components/popup/popup.vue";

export default {
  emits: ['chooseImage', 'chooseMessage', 'closePopup'],
  name: "UploadSelectPopup",
  components: {Popup},
  computed: {
    lang() {
      return this.$t('components.upload_select_popup')
    }
  },
  props: {
    showPopup: {
      type: Boolean,
      default: false
    }
  },
}
</script>

<style lang="scss">
.select-icon {
  width: 60rpx;
  height: 60rpx;
  display: block;
  margin: auto;
}

.option-item {
  padding: 20rpx;
}

.option-title {
  font-weight: bold;
}

.option-description {
  color: grey;
  font-size: 24rpx;
}
</style>
